<template>
	<div class="flex-1 flex flex-col">
		<base-nav-bar titleT="settings.title" is-goback />
		<div class="h-group-t-big" />
		<div class="flex h-17 p-[10px] pb-0 bg-bg-1 rounded-lg overflow-x-auto">
			<base-switch-tabs v-model="tab" :data="tabList" style="--min-width: auto" />
			<SessionsNav v-if="router.currentRoute.value.name === 'settings.sessions'" class="ml-auto" />
		</div>
		<div class="h-group-t-big" />
		<router-view />
	</div>
</template>

<script setup lang="ts">
import { BaseNavBar, BaseSwitchTabs, SwitchTabsItem } from '@/components/base'
import { ref, watch } from 'vue'
import { router } from '@/router'
import { find } from 'lodash-es'
import SessionsNav from './sessions/sessions-nav.vue'

const tabList = <SwitchTabsItem[]>[
	{ id: 'general', nameT: 'settings.general' },
	{ id: 'verify', nameT: 'settings.verify' },
	{ id: 'security', nameT: 'settings.security' },
	{ id: 'preferences', nameT: 'settings.preferences' },
	{ id: 'sessions', nameT: 'settings.sessions' }
]
const getTabItem = () => find(tabList, { id: router.currentRoute.value.path.split('/').pop() })
const tab = ref<string | number>(getTabItem()?.id || 'general')

watch(tab, (id) => router.replace({ name: `settings.${id}` }))
watch(router.currentRoute, () => {
	const id = getTabItem()?.id
	!!id && (tab.value = id)
})
</script>
